<template>
  <div
    class="tablePageWarp"
    style="padding:0"
  >
    <div class="table-page-search-wrapper commonSelectWidth">
      <a-form>
        <a-row :gutter="16">
          <a-col
            :md="6"
            :sm="24"
          >
            <a-form-item :colon="false">
              <a-input
                v-model.trim="queryParam.vin"
                placeholder="VIN"
                allowClear
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="12"
            :sm="24"
            class="btnWarp"
          >
            <div class="searchBtns">
              <a-button @click="refreshData(true)">
                <i class="iconfont icon-chazhao"></i>
                {{ $t('inquiry') }}
              </a-button>
              <a-button
                type="primary"
                @click="halderDown"
              >
                <i class="iconfont icon-xiazai"></i>
                {{ $t('export') }}
              </a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div
      class="commonTableSty smallWith"
      ref="blackList"
    >
      <s-table
        ref="table"
        size="default"
        :rowKey="(record,index)=>record.id"
        :columns="blackColumns"
        :data="loadPageData"
        :row-selection="batchOperationTag?rowSelection:null"
        :showHeader="!batchOperationTag"
        class="h100"
      >
        <template
          v-if="batchOperationTag"
          slot="title"
        >
          <div class="tableTitle">
            <div class="checkWarp">
              <a-checkbox
                @change="allCheck"
                :checked="allChecked"
              >
              </a-checkbox>
            </div>
            <div class="chosed">
              {{ `已选：${selectedRowKeys.length}` }}
            </div>
            <div class="operationWarp">
              <span
                class="moveOutSty"
                @click="moveOut(selectedRowKeys)"
              >{{ $t('moveOut') }}</span>
              <span
                style="cursor: pointer;"
                @click="()=>{batchOperationTag=false}"
              >{{ $t('cancel') }}</span>
            </div>
          </div>
        </template>
        <a
          slot="vin"
          slot-scope="text"
        >
          <table-ellipsis :text="text"></table-ellipsis>
        </a>
        <template
          slot="partNumber"
          slot-scope="text,record"
        >
          <table-ellipsis :text="record.vin"></table-ellipsis>
        </template>
        <template
          slot="partName"
          slot-scope="text,record"
        >
          <table-ellipsis :text="record.vin"></table-ellipsis>
        </template>
        <template
          slot="taskName"
          slot-scope="text,record"
        >
          <table-ellipsis :text="record.taskName"></table-ellipsis>
        </template>
        <template
          slot="originalVersion"
          slot-scope="text,record"
        >
          <table-ellipsis :text="record.sourceVersionName"></table-ellipsis>
        </template>
        <template
          slot="createTime"
          slot-scope="text"
        >
          <span>
            {{ text|moment('YYYY-MM-DD HH:mm:ss') }}
          </span>
        </template>
        <template
          slot="reasonType"
          slot-scope="text,record"
        >
          <table-ellipsis :text="record.blockReason"></table-ellipsis>
        </template>
        <template slot="actionTile">
          <a @click="()=>{batchOperationTag=true}">{{ $t('multipleChoice') }}</a>
        </template>
        <template
          slot="action"
          slot-scope="text,record"
        >
          <a @click="moveOut(record.id)">{{ $t('moveOut') }}</a>
        </template>
      </s-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { STable } from '@/components'
import HasNoPermissionTip from '@/components/HasNoPermissionTip'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { blackColumns } from './columConfig'
export default {
  name: 'BlackList',
  components: {
    TableEllipsis,
    HasNoPermissionTip,
    STable
  },
  props: {
    recordData: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapGetters(['logindomainCode']),
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  data () {
    return {
      blackColumns,
      loadData: [],
      pageSize: 20,
      scrollDomRef: 'blackList',
      // 查询参数
      queryParam: {},
      allChecked: false,
      selectedRowKeys: [],
      selectedRows: [],
      batchOperationTag: false
    }
  },
  mounted () {
    this.initiSelectValue()
    // this.loadPageData()
  },
  methods: {
    // 下拉框 重置和初始化
    initiSelectValue () {
      this.queryParam = {
        vin: '',
        modelId: ''
      }
    },
    loadPageData () {
      const vm = this
      // 如果是全部则不传值给后端
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParam))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
      }
      JnqueryParam.versionId = vm.recordData.id
      return vm.$api.versionBlackList({ pageNo: vm.pageCount, pageSize: vm.pageSize, ...JnqueryParam })
    },
    refreshData (bool) {
      this.$refs.table.refresh(bool)
    },
    // 移除
    moveOut (selected) {
      const vm = this
      if (!selected) {
        vm.$message.warning(vm.$t('pleaseSelect'))
        return
      }
      this.$confirm({
        title: vm.$t('moveOut'),
        content: vm.$t('moveOut'),
        class: 'confirmStyle',
        icon: '<Icon >',
        width: 378,
        onOk () {
          vm.$api.versionBlackDelete({ ids: selected }).then(() => {
            vm.$message.success(vm.$t('success'))
            vm.$refs.table.clearSelected()
            vm.refreshData(true)
          })
        },
        onCancel () { }
      })
    },
    // 导出表格
    halderDown () {
      const vm = this
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParam))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
      }
      JnqueryParam.versionId = vm.recordData.id
      vm.$api.versionBlackExport(JnqueryParam).then(Response => {
        // 获取响应文件流
        const blob = Response
        const reader = new FileReader()
        reader.readAsDataURL(blob) // 转换为base64，可以直接放入a表情href
        reader.onload = function (e) {
          vm.$commonFun.fileDownLoad(e.target.result, `${vm.$t('blackList')}.xlsx`)
        }
      })
    },
    // 全选
    allCheck (e) {
      this.selectedRowKeys = []
      if (e.target.checked) {
        for (let i = 0; i < this.loadData.length; i = i + 1) {
          this.selectedRowKeys.push(this.loadData[i].id)
        }
      }
      this.allChecked = e.target.checked
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      if (this.selectedRowKeys.length === this.loadData.length) {
        this.allChecked = true
      } else {
        this.allChecked = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.moveOutSty {
  display: inline-block;
  height: 24px;
  padding: 0 10px;
  text-align: center;
  color: #ff3737;
  border: 1px solid;
  line-height: 24px;
  border-radius: 2px;
  margin-right: 14px;
  cursor: pointer;
}
</style>
